<template>
    <div class="content">
        <!-- 画面 -->
        <div :class="{ 'screen': true,'screenSuccess': pageflag,'screenError': !pageflag}">
            <easy-player
                ref="easyPlayer"
                v-if="isReset"
                :video-url="m3u8Url"
                :live="true"
                :autoplay="false"
                @play="onPlayerPlay($event)"
            ></easy-player>
        </div>
    </div>
</template>

<script>
import EasyPlayer from '@easydarwin/easyplayer'
export default {
    props: ['m3u8Url', 'isReset'],
    components: {
        EasyPlayer
    },
    data() {
        return {
            pageflag: true,
        };
    },
    created() {
    },
    mounted() {
        this.$nextTick(() => {
            console.log(this.$refs.easyPlayer, "this.$refs.easyPlayer");
        });
    },
    beforeDestroy() {
    },
    methods: {
        onPlayerPlay(e) {
            console.log(e, '播放事件回调：', 'play');
            // 调用父组件的方法
            this.$parent.pauseVideo2(this.m3u8Url);
        },
        // 主动暂停播放
        onPlayerMuted() {
            console.log("主动暂停播放")
            // this.$refs.easyPlayer.replay();
        },
    },
};
</script>
<style lang='scss' scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/monitoring-border.png");
  background-size: cover;

  .screen {
      width: 100%;
      height: 100%;
      //background-image: url("../../assets/img/img.png");
      background-color: #000;
      background-size: cover;
      margin-top: 10px;
      position: relative;
  }

  .screenSuccess {
      //background-image: url("../../assets/img/img.png");
      background-color: #000;
  }
  .screenError {
    background-image: url("../../assets/img/DefaultPage.jpg");
  }
}

::v-deep .vjs-live-display {
    display: none;
}

</style>
